<html>
<head>
    <meta charset="UTF-8">
    <title>X-Menu</title>
    <style>
        .b {
            color = #000066;
            cursor: hand
        }

        .menu {
            font-family: Arial;
            cursor: Default;
            font-size: 12px;
            border: 1px #000000 solid;
            border-collapse: collapse;
            filter: progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd) progid:DXImageTransform.Microsoft.Shadow(direction=135, color=#cccccc, strength=3);
        }

        .ht {
            font-weight: bold
        }
    </style>
    <script>
        function CoolMenuControl() {
            this.lastScrollX = 0;
            this.lastScrollY = 0;
            this.lastScrollW = 0;
            this.lastScrollH = 0;
            this.td_X = 0;
            this.td_Y = 0;
            this.td_W = 0;
            this.td_H = 0;
            this.td = 0;
            this.mouseon = 0;
            this.current = null
            this.hk_name;
            this.hktable_name;
            this.menudiv_name;
            this.menutable_name;
            this.ml = 0;
            this.menuarray = new Array();
            this.speed;
            this.href = "";

//-----菜单项目---
            function menuitem(type, value, url, target) {
                this.type = type
                this.value = value
                this.url = url
                this.target = target
            }

//插入菜单---
            this.insertmenu = function (type, value, url, target) {
                this.menuarray[this.menuarray.length] = new menuitem(type, value, url, target)
            }
//初试化---
            this.init = function (name, bdc, bgc, speed, Alpha) {
                var inhtml = ""
                var cellcount = 0
                var lastcellcount = 0
                this.hk_name = name + "hk"
                this.hktable_name = name + "hktable"
                this.menudiv_name = name + "menudiv"
                this.menutable_name = name + "menutable"
                this.speed = speed
                for (i = 0; i < this.menuarray.length; i++) {
                    if (this.menuarray[i].type == "2") cellcount = cellcount + 1
                    if (this.menuarray[i].type == "1" || this.menuarray[i].type == "0") {
                        cellcount = 0
                    }
                    if (lastcellcount < cellcount) {
                        lastcellcount++
                    }

                }

                stylecode = "cursor:hand;filter:Alpha(style=0,opacity=" + Alpha + ");background-color:" + bgc
                suspendcode = "<DIV id=" + this.hk_name + " style='POSITION:absolute;' onclick='" + name + ".doClick()'>"
                    + "<table id=" + this.hktable_name + " border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='" + bdc + "'>"
                    + "<tr><td height='18' style='" + stylecode + "'></td></tr></table></div>";
                document.write(suspendcode);
                var fcell = true
                for (i = 0; i < this.menuarray.length; i++) {
                    switch (this.menuarray[i].type) {
                        case "0":
                            t = cellcount * 2
                            if (t <= 0) {
                                inhtml += '<tr><td colspan=2 class=ht onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value
                            } else {
                                inhtml += '<tr><td colspan=' + t + ' class=ht onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value
                            }
                            fcell = true
                            break;
                        case "1":
                            t = (cellcount - 1) * 2
                            if (t <= 0) {
                                inhtml += '<tr><td width=6><td onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value
                            } else {
                                inhtml += '<tr><td width=6><td colspan=' + t + ' onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value
                            }
                            fcell = true
                            break;

                        case "2":
                            if (fcell) {
                                inhtml += '<tr><td width=6><td onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value;
                                fcell = false
                            } else {
                                inhtml += '<td width=6><td onmouseover=\'' + name + '.href="' + this.menuarray[i].url + ',' + this.menuarray[i].target + '"\'>' + this.menuarray[i].value;
                            }
                            break;
                    }
                }
                inhtml = '<div id=' + this.menudiv_name + ' onmousemove="' + name + '.doOver()">'
                    + '<table id=' + this.menutable_name + ' border="0" cellpadding="2" class="menu" cellspacing="4">'
                    + inhtml
                    + '</table></div>';
//alert(inhtml)
                document.write(inhtml);
                this.lastScrollX = 0;
                this.lastScrollY = -4;
                this.posXY(eval(this.menutable_name).cells[0])
                this.td_W = eval(this.menutable_name).cells[0].scrollWidth + 6
                this.td_H = eval(this.menutable_name).cells[0].scrollHeight
                setInterval(name + ".scrollback()", 1)
            }
//-----单击超连接---
            this.doClick = function () {
                //alert(this.url)
                var url = this.href.split(",")
                //alert(url[0])
                //alert(url[1])
                if (url[0] == "") return
                if (url[1] == "_blank") {
                    window.open(url[0])
                } else {
                    location.href = url[0]
                }
            }
//-----滑动处理---
            this.scrollback = function () {
                diffX = this.td_X - 3
                diffY = this.td_Y - 5
                diffW = this.td_W
                diffH = this.td_H
                percentX = this.speed * (diffX - this.lastScrollX);
                percentY = this.speed * (diffY - this.lastScrollY);
                percentW = this.speed * (diffW - this.lastScrollW);
                percentH = this.speed * (diffH - this.lastScrollH);
                if (percentX > 0) percentX = Math.ceil(percentX);
                else percentX = Math.floor(percentX);
                if (percentY > 0) percentY = Math.ceil(percentY);
                else percentY = Math.floor(percentY);
                if (percentW > 0) percentW = Math.ceil(percentW);
                else percentW = Math.floor(percentW);
                if (percentH > 0) percentH = Math.ceil(percentH);
                else percentH = Math.floor(percentH);
                eval(this.hk_name).style.pixelTop += percentY;
                eval(this.hk_name).style.pixelLeft += percentX;
                eval(this.hktable_name).style.pixelWidth += percentW;
                eval(this.hktable_name).style.pixelHeight += percentH;
                this.lastScrollX = this.lastScrollX + percentX;
                this.lastScrollY = this.lastScrollY + percentY;
                this.lastScrollW = this.lastScrollW + percentW;
                this.lastScrollH = this.lastScrollH + percentH;
            }
//-----滑出---
            this.doOver = function () {
                if (event.srcElement.tagName == "TD") {
                    if (event.srcElement.innerText.length == 0 || event.srcElement.innerText == "|") return
                    this.posXY(event.srcElement)
                    this.td_W = event.srcElement.scrollWidth + 6
                    this.td_H = event.srcElement.scrollHeight
                }
            }
//-----绝对定位---
            this.posXY = function (obj) {
                hk_left = obj.offsetLeft
                hk_top = obj.offsetTop
                vParent = obj.offsetParent;

                while (vParent.tagName.toUpperCase() != "BODY") {
                    hk_left += vParent.offsetLeft;
                    hk_top += vParent.offsetTop;
                    vParent = vParent.offsetParent;
                }

                this.td_X = hk_left
                this.td_Y = hk_top
            }
//-----关于---
            this.about = function () {
                alert("OK")
            }
        }
    </script>
    <!--
    第一步：实体化X-Menu类
    用法:
    var <实体变量>.new CoolMenuControl()
    --->
    <script language="javascript">
        var CoolMenu1 = new CoolMenuControl()
        var CoolMenu2 = new CoolMenuControl()
        var CoolMenu3 = new CoolMenuControl()
        var about = new Array()
        about[0] = "关于X-Menu菜单\n\nAuthor:PuterJam\nCopyright 2004\n转载请通知本人"
        about[1] = "关于作者QQ:10644570\nE-Mail:PuterJam@etang.com"
    </script>
</head>
<body>
<!--
第二步：建立菜单项目---
用法:
<实体变量>.insertmenu(类型,Html代码,链接网址,目标)
类型：0代表菜单标题，0代表树型菜单子项目，2代表横向菜单子项目Html代码：显示在菜单上的Html代码
链接网址：不用多说了，网址或Javascript脚本
目标：默认为空，既不在本页打开；"_blank"代表在新的页面打开
例如:     
    CoolMenu2.insertmenu("2","<img src=/jscss/demoimg/200903/arrow.gif> 百度一下","http://www.baidu.com/","_blank")  　
-->
<script>
    CoolMenu1.insertmenu("0", "欢迎使用X-Menu (菜单演示)<br>&nbsp; <font style='font-weight:lighter;'>Made By PuterJam</font>", "", "")
    CoolMenu1.insertmenu("0", " ", "http://www.baidu.com/", "_blank")
    CoolMenu2.insertmenu("0", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 横向菜单", "", "")
    CoolMenu2.insertmenu("2", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 源码爱好者", "/", "_blank")
    CoolMenu2.insertmenu("2", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 最新更新", "http://cn.yahoo.com/", "_blank")
    CoolMenu2.insertmenu("2", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 站长博客", "/", "_blank")
    CoolMenu2.insertmenu("2", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 更新排行", "/", "_blank")
    CoolMenu2.insertmenu("2", "<img src=http://www.codefans.net/jscss/demoimg/200903/arrow.gif> 源码下载", "/", "_blank")
    CoolMenu3.insertmenu("0", "<img src=http://www.codefans.net/images/logo.gif width=148 height=50>", "", "")
    CoolMenu3.insertmenu("0", "<img src=http://www.codefans.net/jscss/demoimg/200903/sds.gif> X-Menu简介 ", "/", "_blank")
    CoolMenu3.insertmenu("1", "关于菜单", "javascript:alert(about[0])", "")
    CoolMenu3.insertmenu("1", "关于作者", "javascript:alert(about[1])", "")
    CoolMenu3.insertmenu("1", "联系我吧", "mailto:PuterJam@etang.com", "")
    CoolMenu3.insertmenu("1", "浏览器版本", "javascript:alert(navigator.appName)", "")
</script>
<!--
第三步：建立菜单---
  用法:
    <实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
       '实体变量名'必须与<实体变量>相同
       如果背景颜色="transparent"既为完全透明
　例如:     
    CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)  　
-->
<script>CoolMenu1.init("CoolMenu1", "#002000", "#38FFff", 0.1, 15)</script>
<script>CoolMenu2.init("CoolMenu2", "#002000", "#00FF80", 0.2, 10)</script>
<script>CoolMenu3.init("CoolMenu3", "#002000", "#f0FF00", 0.3, 25)</script>
</body>
</html>